<template>
  <div>
    <div class="title">
      <span>历史上传记录</span>
    </div>
    <el-table :data="tableData"
              :header-cell-style="{background:'#f2f5fc',color:'#555'}"
              border>
      <el-table-column prop="id" label="ID" width="60">
      </el-table-column>
      <el-table-column prop="hospitalName" label="院名" width="120">
      </el-table-column>
      <el-table-column prop="dataType" label="数据类型" width="100">
      </el-table-column>
      <el-table-column prop="reportDate" label="上传时间" width="200">
        <template slot-scope="scope">
          {{ formatDateTime(scope.row.reportDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="fileSize" label="数据大小" width="140">
        <template slot-scope="scope">
          {{ scope.row.fileSize+" byte" }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
      </el-table-column>
      <el-table-column prop="operate" label="操作">
        <template slot-scope="scope">
          <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.id)" style="margin-left: 5px">
            <el-button slot="reference" size="small" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {deleteReport, selectAllById} from "@/api/report"

export default {
  name: "UploadRecord",
  data() {
    return {
      tableData: [],
      centerDialogVisible: false,
      form: {
        userId: "",
        name: "",
        phone: "",
        dailyclinic: "", //日均出诊人数
        bed: "",  //床位
        email: "",
        address: "",
        membership: "",
        type: "",
        total: ""
      }
    }
  },
  methods: {
    loadPost() {
      selectAllById({
        reporterId:this.$store.state.userId
      }).then((res) => {
        if (res.flag == true) {
          this.tableData = res.data
        } else {
          alert("获取数据失败")
        }
      })
    },
    del(id) {
      deleteReport({
        id: id
      }).then((res) => {
        if (res.flag == true) {
          this.$message.success("删除成功");
          this.loadPost()
        } else {
          this.$message.error(res.data);
        }
      }).catch((err) => {
        console.log("删除失败");
      });
    },
    formatDateTime(dateTimeString) {
      const backendDate = new Date(dateTimeString);
      const year = backendDate.getFullYear();
      const month = String(backendDate.getMonth() + 1).padStart(2, '0');
      const day = String(backendDate.getDate()).padStart(2, '0');
      const hours = String(backendDate.getHours()).padStart(2, '0');
      const minutes = String(backendDate.getMinutes()).padStart(2, '0');
      const seconds = String(backendDate.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  },
  created() {
    this.loadPost()
  }
}
</script>

<style scoped>
.title {
  font-family: cursive;
  font-size: 18px; /* Adjust the font size as needed */
  text-align: center;
}

.title span {
  width: 100%;
  height: 46px;
  display: inline-block;
  float: left;
  background: url(../../assets/img/upload.png);
  line-height: 46px;
  position: center;
  z-index: 5;
}
</style>